<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传展示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .preview-container {
            margin-top: 20px;
            padding: 10px;
            border: 1px dashed #ccc;
        }
        #previewImage {
            max-width: 100%;
            max-height: 500px;
            display: none;
        }
    </style>
</head>
<body>
    <input type="file" accept="image/*"> <!-- 限制只能选择图片文件 -->
    <button>上传</button>
    <div class="preview-container">
        <img id="previewImage" alt="上传的图片预览">
    </div>

    <script>
        $('button').click(function () {
            // 获取文件输入框中的文件对象
            let fileInput = $('input')[0];
            if (!fileInput.files || fileInput.files.length === 0) {
                alert('请先选择要上传的图片');
                return;
            }

            let file = fileInput.files[0];
            
            // 验证文件类型是否为图片
            if (!file.type.startsWith('image/')) {
                alert('请选择图片文件');
                return;
            }

            // 创建FormData对象
            let formdata = new FormData();
            formdata.append('files', file);

            axios({
                url: 'http://192.168.0.30:3301/users/uplode',
                method: 'post',
                data: formdata,
                headers: {
                    'Content-Type': 'multipart/form-data' // 显式设置表单数据类型
                }
            })
            .then(res => {
                console.log('上传成功', res);
                
                // 假设后端返回的图片地址在res.data.url中
                // 根据实际后端返回的数据结构进行调整
                if (res.data && res.data.url) {
                    let imgElement = document.getElementById('previewImage');
                    imgElement.src = res.data.url; // 设置图片地址
                    imgElement.style.display = 'block'; // 显示图片
                    
                    // 清空文件输入框，允许重新选择文件
                    fileInput.value = '';
                } else {
                    alert('无法获取图片地址，请检查后端返回数据');
                }
            })
            .catch(err => {
                console.error('上传失败', err);
                alert('上传失败，请重试');
            });
        });
    </script>
</body>
</html>